<template>
  <view class="content uni-flex-column" :style="bgStyle">
    <!-- 修改导航栏样式 -->
    <CustomNavBar class="navbar fixed-top" title="">
      <template v-slot:left><uni-icons type="left" size="20" @click="goBack"></uni-icons></template>
    </CustomNavBar>
    
    <!-- 二维码内容 -->
    <view class="QRcode-content" :style="qrcodeBgStyle">
      <view class="QRcode-top">
        <image :src="userInfo.avatar" class="profile-picture"/>
        <text class="userName">{{!userInfo||userInfo.nikeName===''?'':userInfo.nikeName}}</text>
        <text class='lingfuId'>零付ID：{{!userInfo||userInfo.zeroId===''?'':userInfo.zeroId}}</text>
      </view>
      <view class="QRcode">
        <image :src="`${$ImgBaseUrl}logo.png`"  class='QRcode-img'/>
        <text class="QRcode-bottom">扫一扫关注我</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ImgBaseUrl } from "@/utils/domain.js";
import CustomNavBar from "@/components/custom-navbar/index.vue";
import { computed, onMounted, ref } from "vue";
import { useStore } from 'vuex';

const store = useStore();

// 使用computed从Vuex中获取userInfo
const userInfo = computed(() => store.state.userInfo || {});

const bgStyle = computed(() => ({
  backgroundImage: `url(${ImgBaseUrl}MyViewQRcodeBg.png)`,
}));

const qrcodeBgStyle = computed(() => ({
  backgroundImage: `url(${ImgBaseUrl}MyQRcodeDetailsBg.png)`,
  width: '657rpx',
  height: '939rpx',
  backgroundSize: '100% auto',
  backgroundRepeat: 'no-repeat'
}));

const goBack = () => {
  uni.navigateBack();
};

// 页面加载时检查用户信息
onMounted(() => {
  console.log('从Vuex获取的用户信息:', userInfo.value);
  
  // 如果用户信息不存在，可以选择重新获取
  if (!userInfo.value || Object.keys(userInfo.value).length === 0) {
    console.warn('用户信息不存在，可能需要重新登录');
    // 这里可以添加重新登录的逻辑
  }
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;
  height: 100vh;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 添加导航栏样式 */
  .fixed-top {
    position: absolute; /* 绝对定位 */
    top: 0rpx;         /* 距离顶部距离 */
    left: 30rpx;        /* 距离左侧距离 */
    z-index: 1000;      /* 确保在最上层 */
    width: auto;        /* 宽度自适应 */
  }
  
  .QRcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .QRcode-top {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 290rpx;
      
      .userName {
        font-size: 36rpx;
        color: #303133;
        font-weight: 500;
      }
      
      .lingfuId {
        font-size: 28rpx;
        color: #666666;
        font-weight: 400;
      }
      
      .profile-picture {
        width: 168rpx;
        height: 168rpx;
        border-radius: 100%;
      }
    }
    
    .QRcode {
      width: 100%;
      height: 600rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      
      .QRcode-img {
        width: 480rpx;
        height: 480rpx;
        border-radius: 0rpx;
      }
      
      .QRcode-bottom {
        color: #666666;
        font-size: 28rpx;
        font-weight: 400;
      }
    }
  }
}
</style>